<template>
  <div class="article">
    <!-- 设置路由出口
    <router-view></router-view>
    
    <div class="navs">
      <router-link to="/layout/article">文章</router-link>
      <router-link to="/layout/collect">收藏</router-link>
      <router-link to="/layout/like">点赞</router-link>
      <router-link to="/layout/user">我的</router-link>
    </div> -->
    <!-- <router-link to="/detail">文章详情</router-link> -->
    <div class="heard">
      <div class="left">
        <router-link to="/layout/article/recommend">
          <div class="div">
            <div>推荐</div>
            <div class="divider"></div>
          </div>
        </router-link>
        <router-link to="/layout/article/new">
          <div class="div">
            <div>最新</div>
            <div class="divider"></div>
          </div>
        </router-link>
      </div>
      <div class="right">
        <img src="../assets/logo.dbd40807.png" alt="" />
      </div>
    </div>
    <router-view></router-view>
    <!-- <div
      class="item"
      v-for="item in list"
      :key="item.id"
      @click="getID(item.id)"
    >
      <div class="top">
        <img :src="item.creatorAvatar" />
        <div class="name">
          <div class="subname">{{ item.stem }}</div>
          <div class="name">{{ item.creatorName }} | {{ item.createdAt }}</div>
        </div>
      </div>
      <div class="middle">
        <div class="title">{{ item.content }}</div>
        <div class="like">
          点赞 {{ item.likeCount }} | 收藏 {{ item.views }}
          {{ item.viewCount }}
        </div>
      </div>
    </div> -->
    <!-- <infinite-loading
      @infinite="loadingMore"
      :identifier="100"
    ></infinite-loading> -->
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "HmArticle",
  // data() {
  //   return {
  //     list: [],
  //     page: 1,
  //     loading: false,
  //     pageTotal: 0,
  //   };
  // },
  created() {
    // this.getList();
    this.$router.push({
      path: "/layout/article/item",
    });
  },
  methods: {
    //获取文章列表
    // async getList() {
    //   this.loading = true;
    //   const res = await axios({
    //     url: "https://mock.boxuegu.com/mock/3083/articles",
    //   });
    //   this.list = res.data.result.rows;
    //   this.pageTotal = res.data.result.pageTotal;
    //   console.log(res.data);
    //   console.log(this.pageTotal);
    //   this.loading = false;
    // },
    //发送文章id
    // getID(id) {
    //   this.$router.push({
    //     path: `/detail?id=${id}`,
    //   });
    // },
    //加载更多
    // async loadingMore() {
    //   // 如果正在加载，则不执行
    //   if (this.loading) return;
    //   if (this.page > this.pageTotal) return;
    //   console.log("8888");
    //   this.loading = true;
    //   this.page++;
    //   const res = await axios({
    //     url: `https://mock.boxuegu.com/mock/3083/articles?count=${this.page}`,
    //   });
    //   let data = res.data.result.rows;
    //   this.list.push(...data);
    //   this.loading = false;
    //   console.log(this.list.length);
    // },
  },
};
</script>

<style scoped lang="less">
.article {
  padding-bottom: 50px;

  .heard {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 0.5px solid #cccccc72;

    .right {
      img {
        width: 30px;
      }
    }
  }

  // .item {
  //   font-size: 14px;
  //   border-bottom: 1px solid #ccc;
  //   padding: 10px;
  //   margin: 0 10px;

  //   .top {
  //     display: flex;
  //     height: 40px;
  //     margin-bottom: 5px;

  //     .name {
  //       flex: 1;
  //       display: flex;
  //       flex-direction: column;
  //       justify-content: space-between;
  //       line-height: 20px;
  //     }

  //     img {
  //       width: 40px;
  //       height: 40px;
  //     }
  //   }

  //   .middle {
  //     font-size: 13px;

  //     //超出两行省略号
  //     .title {
  //       overflow: hidden;
  //       text-overflow: ellipsis;
  //       display: -webkit-box;
  //       -webkit-line-clamp: 2;
  //       -webkit-box-orient: vertical;
  //     }
  //   }
  // }
}
</style>
